<template>
  <div class="container">
    <div class="top-bar">
      <div class="status">
        <div class="msg">
          {{order_data.order_status_name}}
        </div>
        <div class="tip"
             v-if="order_data.order_status==1">
          剩余支付时间 {{end_time}}
        </div>
      </div>
      <div class="status-img">
        <!-- 待支付 -->
        <img :src="base_url+'/mp_2.9/details_pay@2x.png'"
             v-if="base_url&&order_data.order_status==1"
             alt=""
             class="img">
        <!-- 待消费 -->
        <img :src="base_url+'/mp_2.9/details_consume@2x.png'"
             v-if="base_url&&order_data.order_status==2"
             alt=""
             class="img">
        <!-- 预约中 -->
        <img :src="base_url+'/mp_2.9/details_order@2x.png'"
             v-if="base_url&&order_data.order_status==3"
             alt=""
             class="img">
        <!-- 待评价 -->
        <img :src="base_url+'/mp_2.9/details_evaluate@2x.png'"
             v-if="base_url&&(order_data.order_status==4||order_data.order_status==6)"
             alt=""
             class="img">
        <!-- 订单关闭 -->
        <img :src="base_url+'/mp_2.9/details_close@2x.png'"
             v-if="base_url&&(order_data.order_status==5||order_data.order_status==7||order_data.order_status==8)"
             alt=""
             class="img">
      </div>
    </div>
    <div class="main"
         v-if="order_data.project_name"
         @tap="to_detail()">
      <div class="logo">
        <img :src="img_url+order_data.project_image"
             v-if="img_url"
             alt=""
             class="img">
      </div>

      <div class="info">
        <div class="title">
          {{order_data.project_name}}
        </div>
        <div class="hos-name clearfix">
          {{order_data.hospital_name}}
          <div class="distance"
               @tap.stop="watch_map()">
            <div class="icon">
              <img :src="base_url+'/mp_2.9/ic_location_white@2x.png'"
                   v-if="base_url"
                   alt=""
                   class="img">
            </div>
            <div class="distance_num">
              {{order_data.juli}} km
            </div>
          </div>
        </div>
        <div class="plus"
             v-if="order_data.plus_title&&order_data.plus_title!=''">
          {{order_data.plus_title}}
        </div>
        <div class="price">
          <div class="grade"
               v-if="order_data.deduction_integral>0">
            积分可抵 {{order_data.project_deduction_credit}}
          </div>
          <div class="money">
            <span class="icon">￥</span>
            <span class="num">
              {{order_data.project_price}}
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 核销二维码 -->
    <div class="check-code"
         v-if="order_data.code&&order_data.code!=null">
      <div class="top">
        核销码：{{order_data.code}}
      </div>
      <img :src="order_data.qr_code_url"
           v-if="order_data.qr_code_url"
           mode="widthFix"
           alt=""
           class="qr-code">
    </div>

    <div class="order-detail">
      <ul class="detail-list clearfix">
        <li class="list-item">
          <div class="left">
            订单编号
          </div>
          <div class="right">
            {{order_data.order_sn}}
            <div class="copy-btn"
                 @tap.stop="copy_order(order_data.order_sn)">
              复制
            </div>
          </div>
        </li>

        <li class="list-item">
          <div class="left">
            购买手机号
          </div>
          <div class="right">
            {{order_data.user_phone}}
          </div>
        </li>
        <li class="list-item">
          <div class="left">
            购买数量
          </div>
          <div class="right">
            1
          </div>
        </li>

        <li class="list-item">
          <div class="left">
            下单时间
          </div>
          <div class="right">
            {{order_data.created_at}}
          </div>
        </li>
        <li class="list-item"
            v-if="order_data.order_status==2||order_data.order_status==4">
          <div class="left">
            支付流水号
          </div>
          <div class="right">
            {{order_data.out_trade_no}}
          </div>
        </li>
        <li class="list-item"
            v-if="order_data.order_status!=1&&order_data.order_status!=8">
          <div class="left">
            订单付款时间
          </div>
          <div class="right">
            {{order_data.pay_time}}
          </div>
        </li>
        <li class="list-item"
            v-if="order_data.order_status==2||order_data.order_status==4">
          <div class="left">
            支付方式
          </div>
          <div class="right">
            {{order_data.pay_time}}
          </div>
        </li>

        <li class="list-item">
          <div class="left">
            订单总价
          </div>
          <div class="right">
            <div class="price">
              <span class="icon">￥</span>
              <span class="num">
                {{order_data.order_price}}
              </span>
            </div>
          </div>
        </li>
        <li class="list-item"
            v-if="order_data.member_discount>0">
          <div class="left">
            PLUS会员优惠
          </div>
          <div class="right">
            <div class="price">
              <span class="icon">￥</span>
              <span class="num">
                {{order_data.member_discount}}
              </span>
            </div>
          </div>
        </li>
        <li class="list-item"
            v-if="order_data.deduction_integral&&order_data.deduction_integral>0">
          <div class="left">
            积分抵扣
          </div>
          <div class="right">
            {{order_data.deduction_integral}}
          </div>
        </li>
        <li class="list-item"
            v-if="order_data.type_money > 0">
          <div class="left">
            优惠券
          </div>
          <div class="right right1">
            -￥<span class="right2">{{order_data.type_money}}</span>
          </div>
        </li>
      </ul>
      <div class="total clearfix">
        <div class="left">
          合计
        </div>
        <div class="price">
          <span class="icon">￥</span>
          <span class="num">
            {{order_data.order_amount}}
          </span>
        </div>
      </div>
    </div>
    <div class="btn-bar"
         v-if="order_data.order_status!=2&&order_data.order_status!=3">
      <ul class="btns">
        <!-- <li class="btn gray-border"
            v-if="order_data.order_status==2||order_data.order_status==5">
          <button @tap="to_service()"
                  class="contact-btn">
          </button>
          申请退款
        </li> -->
        <!-- 预约中查看预约单 -->
        <!-- <li class="btn gray-border"
            v-if="order_data.order_status==4&&order_data.project_order_id>0"
            @tap.stop="booking_detail()">
          查看预约单
        </li> -->
        <!-- 待评价“查看预约单” -->
        <!-- <li class="btn red-border"
            v-if="(order_data.order_status==3||order_data.order_status==6||order_data.order_status==5||order_data.order_status==7)&&order_data.project_order_id>0"
            @tap.stop="booking_detail()">
          查看预约单
        </li> -->
        <li class="btn red-fill"
            v-if="order_data.order_status==1"
            @tap.stop="pay_order()">
          立即付款
        </li>
        <li class="btn red-fill"
            v-if="order_data.order_status>=5&&order_data.order_status<=11"
            @tap.stop="re_buy()">
          重新购买
        </li>
        <li class="btn red-fill"
            v-if="order_data.order_status==4"
            @tap.stop="re_buy()">
          再次购买
        </li>
        <!-- <li class="btn red-fill"
            v-if="order_data.order_status==2">
          <picker mode="date"
                  @change="booking_order"
                  :value="booking_time"
                  :start="booking_start"
                  :end="end_time">
            立即预约
          </picker>
        </li>

        <li class="btn red-border"
            v-if="order_data.order_status==4"
            @tap.stop="evaluat()">
          评价
        </li> -->
      </ul>
    </div>
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
import pay from "@/assets/js/pay1.js";

export default {
  data () {
    return {
      img_url: common.image_response,
      base_url: common.image_resource,
      order_id: 0,
      order_data: {},
      latitude: 0,
      longitude: 0,
      end_time: 0,
      booking_time: "",
      booking_start: new Date(new Date().getTime()).Format('yyyy-MM-dd'),
      booking_end: ""
    };
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "订单详情"
    });
    Object.assign(this.$data, this.$options.data());
    if (options.order_id) {
      this.order_id = options.order_id
    }
  },
  onShow () {
    this.get_location()
  },
  methods: {
    to_service () {
      common.to_service()
    },
    re_buy () {
      let router = `serviceDetail?serviceId=${this.order_data.project_id}&shopId=${this.order_data.hospital_id}`
      wx.navigateTo({ url: '/pages/life_beauty/main?router=' + encodeURIComponent(router) });
    },

    //  复制订单号
    copy_order (data_str) {
      wx.setClipboardData({
        data: data_str, //需要设置的内容,
        success: res => {
          wx.showToast({
            title: '复制成功', //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      });
    },
    // 获取订单详情
    get_detail () {
      console.log(this.latitude, this.longitude);

      common.fly_post('api/v4_2/life/show', {
        id: this.order_id,
        latitude: this.latitude,
        longitude: this.longitude
      }, result => {
        let res = result.data
        if (res.status_code == '0') {
          if (res.data.order_status == 1) {
            let end_timer = res.data.pay_end_time
            this.calculate(end_timer)
          } else if (res.data.order_status == 2) {
            this.end_time = new Date(res.data.last_time * 1000).Format("yyyy-MM-dd")
          }
          this.order_data = res.data
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      })
    },
    // 计算剩余支付时间
    calculate (end) {
      let now_time = new Date().getTime()
      let end_time = end * 1000 - now_time
      //计算出相差天数
      let days = Math.floor(end_time / (24 * 3600 * 1000))
      //计算出小时数
      let leave1 = end_time % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
      let hours = Math.floor(leave1 / (3600 * 1000))
      //计算相差分钟数
      let leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
      let minutes = Math.floor(leave2 / (60 * 1000))
      //计算相差秒数
      let leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
      let seconds = Math.round(leave3 / 1000)
      // //    let day = days >= 10 ? days : '0' + days
      let time_hours = hours >= 10 ? hours : "0" + hours
      let time_minutes = minutes >= 10 ? minutes : "0" + minutes
      let time_seconds = seconds >= 10 ? seconds : "0" + seconds
      this.end_time = `${time_hours}:${time_minutes}:${time_seconds}`
    },
    // 获取定位
    get_location () {
      let that = this
      wx.getLocation({
        type: 'gcj02', //默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标,
        success: res => {
          that.latitude = res.latitude
          that.longitude = res.longitude
          that.get_detail()
        },
        fail: () => {
          wx.showToast({
            title: '无法获取地理位置', //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      });
    },
    // 查看地图
    watch_map () {
      wx.navigateTo({ url: `/pages/package_projects/map/main?hosLat=${this.order_data.lat}&hosLng=${this.order_data.lng}&hosName=${this.order_data.hospital_name}` });
    },
    // 跳转项目详情
    to_detail () {
      wx.navigateTo({
        url: `/pages/package_projects/project_detail/main?id=${this.order_data.project_id}`
      })
    },
    // 立即支付
    pay_order () {
      let that = this
      wx.showLoading({
        title: '加载中', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      wx.getStorage({
        key: 'open_id',
        success: (res) => {
          const open_id = res.data
          common.fly_post(
            'api/v4_2/payment/wechatpay_miniapp_submit',
            {
              //预支付
              openid: open_id,
              body: that.order_data.project_name,
              order_sn: that.order_data.order_sn,
              total: that.order_data.order_amount,
              submit_type: "service_order"
            },
            msg => {
              wx.hideLoading()
              let res = msg.data
              if (res.status_code == 0) {
                wx.requestPayment({
                  timeStamp: res.data.timeStamp,
                  nonceStr: res.data.nonceStr,
                  package: res.data.package,
                  signType: 'MD5',
                  paySign: res.data.paySign,
                  success: function (res) {
                    that.get_detail()
                  },
                  fail: function (res) {
                    wx.showToast({
                      title: '支付未成功', //提示的内容,
                      icon: 'none', //图标,
                      duration: 1500, //延迟时间,
                      mask: true, //显示透明蒙层，防止触摸穿透,
                      success: res => { }
                    });
                  }
                })
              } else {
                wx.hideLoading()
                wx.showToast({
                  title: res.message,
                  icon: 'none',
                  duration: 2000,
                  mask: true
                })
                return false
              }
            }
          )
        },
        fail: () => {
          wx.showToast({
            title: '请先登录', //提示的内容,
            icon: 'none', //图标,
            duration: 2000, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          })
        },
      })
    },
    // 立即预约
    booking_order (e) {
      let that = this
      const booking_date = e.mp.detail.value
      wx.showLoading({
        title: '提交中', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post('/api/v4_2/project/order/reservation', {
        order_id: this.order_data.id,
        appointment_time: booking_date
      }, result => {
        let res = result.data
        if (res.status_code == '0') {
          wx.showToast({
            title: '预约成功', //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: re => {
              setTimeout(() => {
                wx.navigateTo({ url: `/pages/package_projects/yy_order_detail/main?booking_id=${res.data.id}` });
              }, 1500);
            }
          });
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      })
    },
    // 查看预约详情
    booking_detail () {
      wx.navigateTo({ url: `/pages/package_projects/yy_order_detail/main?booking_id=${this.order_data.project_order_id}` });
    },
    // 评价
    evaluat () {
      wx.navigateTo({ url: '/pages/package_mine/project_evaluation/main?id=' + this.order_data.id });
    }

  },
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: rgba(243, 244, 246, 1);
  .top-bar {
    width: 100%;
    height: 108px;
    background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_2.9/me_bg@2x.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    .status {
      position: absolute;
      left: 40px;
      top: 50%;
      transform: translateY(-50%);
      .msg {
        font-size: 16px;
        font-family: "PingFangSC-Medium";
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        line-height: 20px;
      }
      .tip {
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 20px;
        margin-top: 5px;
      }
    }
    .status-img {
      width: 74px;
      height: 74px;
      position: absolute;
      right: 50px;
      top: 50%;
      transform: translateY(-50%);
      .img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  .main {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    background-color: #fff;
    .logo {
      width: 100px;
      height: 100px;
      .img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .info {
      flex: 1;
      padding-left: 10px;
      position: relative;
      .title {
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .hos-name {
        margin-top: 5px;
        font-size: 12px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 17px;
        .distance {
          float: right;
          height: 18px;
          padding: 0 10px;
          background: linear-gradient(
            270deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 140, 160, 0.65) 100%
          );
          border-radius: 10px;
          .icon {
            display: inline-block;
            vertical-align: top;
            width: 12px;
            height: 14px;
            margin-right: 5px;
            margin-top: 2px;
            .img {
              width: 100%;
              height: 100%;
            }
          }
          .distance_num {
            font-size: 14px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(255, 145, 164, 1);
            line-height: 18px;
            display: inline-block;
            vertical-align: baseline;
          }
        }
      }
      .plus {
        padding: 0 5px;
        margin: 4px 0;
        line-height: 16px;
        font-size: 10px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0.2/plus_bg%402x.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: inline-block;
      }
      .price {
        font-size: 10px;
        position: absolute;
        bottom: 0;
        left: 10px;
        .grade {
          font-size: 12px;
          font-family: "PingFangSC-Medium";
          font-weight: 500;
          color: rgba(255, 125, 0, 1);
          line-height: 17px;
        }
        .money {
          .icon {
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(255, 56, 62, 1);
            line-height: 14px;
            display: inline-block;
            vertical-align: baseline;
          }
          .num {
            font-size: 16px;
            font-family: "PingFangSC-Semibol" d;
            font-weight: 600;
            color: rgba(255, 56, 62, 1);
            line-height: 22px;
            display: inline-block;
            vertical-align: baseline;
          }
        }
      }
    }
  }
  //   核销二维码
  .check-code {
    background-color: #fff;
    .top {
      background: rgba(255, 239, 245, 1);
      line-height: 52px;
      padding-left: 15px;
      font-size: 16px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(255, 85, 143, 1);
    }
    .qr-code {
      width: 148px;
      display: block;
      margin: 10px auto;
    }
  }
  .order-detail {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 15px 15px 0 15px;
    box-sizing: border-box;
    .detail-list {
      border-bottom: 1px solid#F3F4F6;
      .list-item {
        display: flex;
        margin-bottom: 10px;
        height: 20px;
        .left {
          width: 124px;
          font-size: 14px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 20px;
        }
        .right {
          flex: 1;
          font-size: 14px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 20px;
          position: relative;
          &.right1 {
            font-size: 10px;
            .right2 {
              font-size: 14px;
              font-family: "PingFangSC-Regular";
            }
          }
          .icon {
            font-size: 12px;
          }
          .price {
            .icon {
              font-size: 12px;
              font-family: "PingFangSC-Medium";
              font-weight: 500;
              color: rgba(255, 56, 62, 1);
              line-height: 17px;
              display: inline-block;
              vertical-align: baseline;
            }
            .num {
              font-size: 14px;
              font-family: "STHeitiTC-Medium";
              font-weight: 500;
              color: rgba(255, 56, 62, 1);
              line-height: 14px;
              display: inline-block;
              vertical-align: baseline;
            }
          }
          .copy-btn {
            width: 50px;
            height: 20px;
            border-radius: 10px;
            border: 1px solid rgba(224, 224, 224, 1);
            font-size: 12px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            line-height: 20px;
            text-align: center;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
    .total {
      height: 50px;
      margin-bottom: 50px;
      .left {
        font-size: 14px;
        font-family: "PingFangSC-Medium";
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 50px;
        float: left;
      }
      .price {
        float: right;
        .icon {
          font-size: 12px;
          font-family: "PingFangSC-Medium";
          font-weight: 500;
          color: rgba(255, 56, 62, 1);
          line-height: 50px;
          display: inline-block;
          vertical-align: baseline;
        }
        .num {
          font-size: 16px;
          font-family: "STHeitiTC-Medium";
          font-weight: 500;
          color: rgba(255, 56, 62, 1);
          line-height: 50px;
          display: inline-block;
          vertical-align: baseline;
        }
      }
    }
  }
  .btn-bar {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.07);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99;
    .btns {
      float: right;
      margin: 5px 15px 5px 0;
      .btn {
        width: 88px;
        height: 39px;
        border-radius: 20px;
        line-height: 39px;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        position: relative;
        .contact-btn {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 20;
          opacity: 0;
        }
      }
      .gray-border {
        background-color: #fff;
        border: 1px solid rgba(224, 224, 224, 1);
        font-size: 12px;
        font-family: "PingFangSC-Medium";
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
      }
      .red-fill {
        background: rgba(255, 56, 62, 1);
        font-size: 12px;
        font-family: "PingFangSC-Medium";
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
      .red-border {
        border: 1px solid rgba(255, 56, 62, 1);
        background-color: #fff;
        font-size: 12px;
        font-family: "PingFangSC-Medium";
        font-weight: 500;
        color: rgba(255, 56, 62, 1);
      }
    }
  }
}
</style>


